$wid:1190px;
$hei:30px;
$col: #787878;
.header_top{
    width: 100%; height: $hei;
    border-bottom: 1px solid #eeeeee;   
    background: #fafafa;
    .wrap{
        width: $wid;
        margin: 0 auto;
        span{
            width: 125px;
            height: $hei;
            display: inline-block;
            line-height: $hei;
            font-size: 12px;
            color: $col;           
        }
        ul{
            float: right;
            height: $hei;
            li{
                margin-top: 8px;
                line-height: 11px;
                height: 11px;
                float: left;
                font-size: 11px;              
                padding: 0 13px;
                border-right:1px solid #e3dee3;
                a{
                    color: $col;
                    img{
                        display: inline-block;
                        float: left;
                        width: 12px;
                        height: 12px;
                        border: 1px solid #E6E6E6;
                    }
                }
            }
            li:nth-last-child{
                border: none;
            }
        }
    }
}
.header_bottom{
    width: 100%;
    height: 108px;
    background: #fff;
    .wrap{
        width: $wid;
        height: 108px;
        margin: 0 auto;
        .logo{
            width: 305px;
            height: 66px;
            margin-top: 17px;
            margin-left: 37px;
            float: left;
        }
        .logo_img{
            width: 295px;
            height: 30px;
            float: left;
            margin-top: 35px;
            margin-left: 66px;
            ul{
                width: 295px;
                height: 30px; 
                li{
                    width: 90px;
                    height: 30px;
                    float: left;
                }
                li:nth-child(2){
                    padding: 0 12px;
                }
            }
           
        }
        .search{
            float: left;
            width: 357px;
            height: $hei;
            margin-top: 30px;
            margin-left: 36px;
            position: relative;
            .search-info{
                width: 307px;
                position: absolute;
                background: #000000;
                opacity: 0.6;
                top: 34px;
                left: 0;
                color: #fff;
            }
            input{
                padding-left: 2px;
                float: left;
                width: 303px;
                height: $hei;
                border: 2px solid #009ee0;
                font-size: 12px;
                color: $col;
            }
            .btn_search{
                cursor: pointer;
                float: left;
                width: 40px;
                height: 34px;
                background: #009ee0;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    display: inline-block;
                }
            }
        }
        .cart{
            display: block;
            cursor: pointer;
            box-sizing: border-box;
            width: 94px;
            height: 32px;
            margin-top: 30px;
            float: right;
            border:1px solid #e8e8e8;
            font-size: 12px;
            color: $col;
            padding-left: 37px;
            line-height: 32px;
            background:#f8f8f8 url(/images/carts.jpg) no-repeat 7px center;
        }
    }
}
//导航栏
nav{
    width: 100%;
    height: 40px;
    background: #0099e6;   
    .wrap{
        position: relative;
        margin: 0 auto;
        width: $wid;
        height: 40px;
        .mune{
            position: absolute;
            width: 220px;
            left:0;
            top: 0;
            color: #ffffff;
            z-index: 1;
        
            .title{
                box-sizing: border-box;
                height: 40px;
                font-size: 12px;
                color: #fff;
                line-height: 40px;
                padding-left: 40px;
                background: #0086d4 url(/images/mune.jpg) no-repeat 15px center;
            }
            //导航需要隐藏的部分
            .nav_list{
                position: absolute;
                display: none;
                height: 420px;
                width: 220px; 
                background: #f1fafd;
                li{
                    height: 47px;
                    width: 190px;
                    margin-left: 15px;                  
                    border-bottom: 1px solid #e6e6e6;                   
                    h3{
                        width: 175px;
                        height: 12px;
                        color: #009fdc;
                        font-size: 12px;
                        margin-top: 12px;
                        line-height: 12px;
                        padding-left: 25px;
                    }
                    a{
                        float: left;
                        font-size: 12px;
                        color: #6688aa;
                        margin: 7px;
                    }
                }
                li:hover{
                    background: #fff !important;
                }
            }
           
        }       
        .nav_prod{
            float: left;
            margin-left: 220px;        
            width: 768px;
            height: 40px;
            font-size: 14px;
            li{
                height: 40px;
                line-height: 40px;
                padding: 0 22px;
                float: left;
                a{
                    color: #ffffff;
                }
            }         
        }
    }
}

banner{
    width: 100%;
    height: 420px;
    .wrap{
        position: relative;
        width: $wid;
        height: 420px;
        margin: 0 auto;
        .banner_box{
           width: 770px;
           height: 420px;
           margin: 0 auto;
       }
       .banner_right{
           position: absolute;
           width: 200px;
           height: 420px;
           top: 0;
           right: 0;         
       }
    }   
}


//楼层导航
.topsearch-wrap{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    opacity: 0.95;
    background: #1166aa;
    z-index: 100;
    transform: translateZ(0);
    .topsearch{
        position: absolute;
        top: 0;
        left: 50%;
        width: $wid;
        height: 50px;
        margin-left: -595px;
        .left{
            float: left;
            display: inline;
            margin-top: 10px;
        }
        .right{
            float: right;     
            width: 756px;
            height: 42px;  
            form{
                float: left;
                width: 636px;
                height: 42px;
                margin-top: 5px;
               ._search{
                   float: left;
                   width: 500px;
                   height: 26px;
                   font-size:12px;
               } 
               .submit{
                  float: left;
                   border: none;
                   width: 100px;
                   height: 30px;
                   background:#0099e6 url(/images/search.jpg) no-repeat center;
               }
            }  
             .cart a{
                 display: block;
                 width: 110px;
                 height: 34px;
                 margin-left: 10px;
                 margin-top: 8px;
                 background:#f8f8f8 url(/images/carts.jpg) no-repeat 5px center;
                 margin-top: 5px;
                 font-size: 12px;
                 line-height: 34px;
                 text-align: center;          
                 float: right;
                 color: #333;
             }     
        }       
    }
}
.right_nav{
    position: fixed;
    width: 60px;
    height: 380px;
    right: 0;
    top: 300px;
    background: #0099e6;
   .on{
        background: #C36C88;
        a{color: #fff;}
    }   
    li{
        width: 60px;
        height: 37px;
        line-height: 36px;
        border-bottom: 1px solid #CCCCCC;
        font-size: 12px;
        line-height: 36px;
        a{color: #333;}
    }
}    


//商品列表
.container{
    width: 100%;    
    padding-top:40px;
    .wrap{
        width: $wid;
        margin: 0 auto;
        background:url(/images/bg-global.jpg) no-repeat;
        .floor{
            height: 428px;
            width: $wid;
            border: 1px solid #E6E6E6;
            border-radius: 2%;
            margin-bottom: 40px;
            .title{
                width: $wid;
                height: 35px;
                font-size: 24px;
                color: #333;
                margin-bottom: 12px;
                font-weight: 800;
                border-bottom: 1px solid #E6E6E6;
            }
            .prod-context{
                width: $wid;
                height: 350px;
                .prod-single{
                    width: 230px;
                    height: 350px;
                    float: left;
                    margin: 0 4px;
                    position: relative;
                    .prod-message{
                        position: absolute;
                        display: none;
                        width: 230px;
                        height: 250px;
                        bottom: 0;
                        left: 0;
                        background: #FFF5F3;
                        opacity: 0.8;
                        h3{
                            width: 225px;
                            height: 20px;
                            line-height: 20px;
                            font-size: 18px;
                            color: #333333;
                            text-align: center;
                            padding-left: 5px;                          
                        }
                        p{
                            width: 230px;
                            height: 150px;
                            font-size: 12px;
                            color: #787878;
                            line-height: 18px;
                            margin-top: 20px;
                        }
                        h4{
                            color: red;
                            width: 230px;
                            height: 20px;
                            font-size: 16px;
                            line-height: 20px;
                            text-align: center;
                            margin-top: 20px;
                        }
                    }                   
                }
                .prod-single:hover .prod-message{display: block}
            }
        }          
    }
}



//网页足部
.footer_t{
    width: 100%;
    height: 100px;
    background: #009de0;
    .wrap{
        width: $wid;
        height: 100px;
        margin: 0 auto;
        a{
            display: block;
            width: $wid;
            height: 100px;
        }
    }
}
.footer_b{
    width: 100%;
    height: 198px;
    .wrap{
        width: $wid;
        height: 198px;
        margin: 0 auto;
        .context{
            width: $wid;
            height: 135px;
            margin-top: 30px;
            .left,.middle,.right{
                float: left;
            }
            .left{
                width: 141px;
                height: 135px;              
            }
            .middle{
                width: 702px;
                height: 135px; 
                margin-left: 90px;
                ul{
                    float: left;
                    width: 140px;
                    height: 135px;
                    li:first-child{
                        color: #333;
                        font-weight: 600;          
                     }        
                    li{
                        height: 28px;
                        line-height: 28px;
                        font-size: 13px;
                        a{
                            color: #666666;
                        }
                    }
                    li:hover a{color: #31B0D5;}
                }
            }
            .right{
                width: 105px;
                height: 135px;
                float: right;
            }
        }
        span{
            width: $wid;
            height: 34px;
        }
    }
}
.company{
    width: 100%;
    height: 80px;
    .wrap{
        width: $wid;
        height: 80px;
        ul{
            float: left;
            width: 831px;
            height: 40px;
            margin-top: 15px;
            margin-left: 138px;
            li{
                float: left;
                height: 40px;
                border: 1px solid #ccccca;
                border-radius: 3%;
                margin-right: 10px;
                img{height: 40px;}
            }          
        }
        span{
            width: 124px;
            height: 47px;
            float: left;
        }
    }
}
